<template>
  <q-page class="q-pa-md" v-loading="loading">
    <div style="position: relative; ">
      <q-breadcrumbs class="q-mb-md" style="height:50px;line-height: 40px; border-bottom: 1px dashed #ccc;">
        <el-icon style="cursor: pointer;" @click="router.go(-1)"><ArrowLeft /></el-icon>
        <q-breadcrumbs-el label="特征分析" />
      </q-breadcrumbs>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="版本号" />
        <el-table-column prop="date" label="类型" />
        <el-table-column prop="address" label="操作" :formatter="formatter">
          <template #default="scope">
            <el-button v-for="(item, index) in scope.row.address" :key="index" link type="primary" size="small"
              @click="clickFun(item)">{{ item }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-if="tableData.length>0" background layout="total, prev, pager, next" :total="10"
        style="position: absolute;right: 50px;margin-top: 20px;" />
      <el-dialog v-model="dialogStartFeature" title="启动特征分析" width="500" :show-close="false" :close-on-click-modal="false">
        <el-form-item label="版本选择:" prop="adress">
          <el-select v-model="value" class="m-2 selectBox" placeholder="请选择版本" size="small" style="width: 200px;" popper-append-to-body="false" popper-class="select-popper">
            <el-option v-for="(item, index) in selectData" :key="index" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogStartFeature = false">取消</el-button>
            <el-button type="primary" @click="dialogStartFeature = false">
              确定
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </q-page>
</template>

<script setup lang="ts">
import type { TableColumnCtx } from 'element-plus'
import { getDatasetFeaturesetList } from 'src/api/dataset'
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()
const projectId = router.currentRoute.value.params.project_id;
const loading = ref(true)
const dialogStartFeature = ref(false)
const selectData=ref(['111','222','333'])
const value = ref('')

interface User {
  date: string
  name: string
  address: string
}

const formatter = (row: User, column: TableColumnCtx<User>) => {
  return row.address
}
const tableData = reactive([
  {
    date: 'all',
    name: 'v004',
    address: ['启动特征分析', '查看分析'],
  },
  {
    date: 'train',
    name: 'v003',
    address: [],
  },
  {
    date: 'eval',
    name: 'v002',
    address: [],
  },
  {
    date: 'inference',
    name: 'v001',
    address: [],
  },
])
getFeaturesetList()
function getFeaturesetList() {
  loading.value = true
  getDatasetFeaturesetList(projectId, 11).then((res: any) => {
    console.log(res.data)
  }).finally(() => {
    loading.value = false
  })
}
function clickFun(str: string) {
  if (str == '启动特征分析') {
    dialogStartFeature.value = true
  }
  if (str == '查看分析') {
    router.push({ name: 'dataset-analysis', params: { project_id: projectId } })
  }

}

</script>

<style scoped></style>
